<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="老人编号">
		    <el-input v-model="search_oldmanId" placeholder="请输入老人编号"></el-input>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- 表格分页 -->
		<el-table :data="tableData" border fit style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
		    <el-table-column fixed type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * 3 + 1}} </span></template>
			</el-table-column>
			<el-table-column fixed prop="id" label="老人编号"></el-table-column>
		    <el-table-column prop="name" label="老人名称"></el-table-column>
		    <el-table-column prop="accountMoney" label="剩余金额"></el-table-column>
		    <el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="recharge(scope.row)" icon="el-icon-coin" circle>充值</el-button>
					<el-button type="text" size="small" @click="tozero(scope.row)" icon="el-icon-error" circle>清零</el-button>
				</template>
		    </el-table-column>
		</el-table>
		<div>
			<el-pagination background layout="prev, pager, next" :total='pages' :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		name:"PlayerINformation",
		data(){
			return{
				search_oldmanId:"",
				pageNum:1,
				pageSize:3,
				pages:1,
				tableData: [{
						id: '0001',
						name: '张三',
						accountMoney: '277.5元'
					}]
			}
		},
		methods:{
			search(){
				let that = this;
				that.$axios.get(that.$global.zuulIp+"/oldman/selectOldmanById?id="+that.search_oldmanId).then((response)=>{
					that.tableData = response.data;
				}).catch((response)=>{
					console.log(response);
				});
			},
			fenye(){
				let that = this;
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize
				};
				that.$axios.get(that.$global.zuulIp+"/oldman/findOldmanByPage",data).then((response)=>{
					that.tableData = response.data;
					that.pages = parseInt(response.data.pages)*10;
				}).catch((response)=>{
					console.log(response);
				});
			},
			recharge(row) {
				let that = this;
				this.$prompt('请输入充值金额', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					// /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
					inputPattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
					inputErrorMessage: '填写内容错误,只能填写>0的整数和小数'
					}).then(({ value }) => {

						that.$axios.get(that.$global.zuulIp+"/oldman/updateOldmnaMoneyById?id="+row.id+'&money='+value).then((response)=>{
							if(response.data == true){
								this.$message({
									type: 'success',
									message: '充值成功!'
								});
							}else{
								this.$message({
									type: 'error',
									message: '充值失败，请联系管理员!'
								});
							}
						}).catch((response)=>{
							console.log(response);
						});
						
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});       
				});
			},
			tozero(row){
				this.$confirm('此操作会将老人'+row.name+'账户金额清空, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {

						that.$axios.get(that.$global.zuulIp+"/oldman/updateOldmnaMoneyById?id="+row.id+'&money=0').then((response)=>{
							if(response.data == true){
								this.$message({
									type: 'success',
									message: '老人'+row.name+'账户金额清空成功!'
								});
							}else{
								this.$message({
									type: 'error',
									message: '清空失败，请联系管理员!'
								});
							}
						}).catch((response)=>{
							console.log(response);
						});

					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消清空'
					});          
				});
			},
			changePageNum(currentPage){
				this.pageNum = currentPage;
				this.fenye();
			},
		},
		mounted:function(){
			that.fenye();
		},
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
 	 }
  	.el-icon-arrow-down {
		font-size: 12px;
	}
  	.el-pagination{
	  margin: 20px;
	  text-align: right;
  	}

  	.el-dialog .el-form{
	  width: 300px;
  	}
</style>
